import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Bubble } from '@ant-design/x';
import { Button, Flex } from 'antd';
import type { GetProp, GetRef } from 'antd';

const roles: GetProp<typeof Bubble.List, 'roles'> = {
    ai: {
        placement: 'start',
        avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
        typing: { step: 5, interval: 20 },
        style: {
            maxWidth: 600,
        },
    },
    user: {
        placement: 'end',
        avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
    },
};

interface Message {
    key: string;
    role: 'user' | 'assistant';
    content: string;
    loading?: boolean;
}

interface AppProps {
    items: Message[];
}

const App: React.FC<AppProps> = ({ items }) => {
    const [count, setCount] = React.useState(3);
    const listRef = React.useRef<GetRef<typeof Bubble.List>>(null);

    return (
        <Flex vertical gap="small">
            <Flex gap="small" style={{ alignSelf: 'flex-end', paddingBottom: 16 }}>
                <Button
                    onClick={() => {
                        listRef.current?.scrollTo({ key: items[0].key, block: 'nearest' });
                    }}
                >
                    Scroll To First
                </Button>

                <Button
                    onClick={() => {
                        listRef.current?.scrollTo({ key: items[items.length - 1 ].key, block: 'nearest' });
                    }}
                >
                    Scroll To Bottom
                </Button>
            </Flex>

            <Bubble.List
                ref={listRef}
                style={{ maxHeight: "80vh", minHeight:"50vh" }}
                roles={roles}
                items={items}
            />
        </Flex>
    );
};

export default App;